import React from "react";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
  }

  render() {
    return (
      <div>
        <h1>{this.state.count}</h1>
        <button
          onClick={() => {
            this.setState((state, props) => {
              // 组件状态
              console.log(state);
              return {
                count: state.count + 1,
              };
            });
          }}
        >
          计数
        </button>
        {/* <SubApp count={this.state.count} /> */}
      </div>
    );
  }

  shouldComponentUpdate(nextProps, nextState) {
    // return false
    console.log("当前组件state",this.state.count,"数据变化后的state",nextState.count);
    return true;
  }
}

class SubApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    return <div>外部传入props{this.props.count + 1}</div>;
  }

  shouldComponentUpdate(nextProps, nextState) {
    console.log("当前props", this.props, "nextProps", nextProps);
    return true;
  }
}

export default App;
